资源
HTML & CSS Full Course - Beginner to Pro (2022) - YouTube
课程
6. The HTML Structure
教你在 VS Code 里安装 Live Server，这样就可以实时写网页时刷新网页：
介绍了 HTML 的正式结构，添加<!DOCTYPE html>、<html>、<head>、<body>等。
使用<link rel="stylesheet" href="XX.css">引用 css。
website.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html>
<head>
<title>Model 3</title>
<link rel="stylesheet" href="styles/6d.css">
</head>
<body>
<p class="title">Model 3</p>
<p>
<span class="decription">
Order Online for
</span>
<span class="link">
Touchless Delivery
</span>
</p>
</body>
</html>
|
styles/6d.css:
因为在国内 Google Font 不好使，所以用此法替代：HTML5如何引入外部字体？亲测有效_52Hertz____的博客-CSDN博客_h5引入字体
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| @font-face {
font-family: "HYFengShangHei_75W";
src:url("/styles/HYFengShangHei_75W.ttf")
}
p {
text-align: center;
font-family: HYFengShangHei_75W;
margin:0;
margin-top: 15px;
}
.title {
font-weight: bold;
font-size: 40px;
}
.decription {
font-size: 25px;
}
.link {
font-size: 25px;
text-decoration: underline;
}
|
7. Images and Text Boxes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE HTML>
<html>
<head>
<title>YouTube.com Clone</title>
<style>
.thumbnail {
width: 300px;
}
.search-bar {
font-size: 20px;
margin-left: 12px;
}
</style>
</head>
<body>
<img class="thumbnail" src="thumbnails/thumbnail-1.webp">
<input class="search-bar" type="text" placeholder="Search">
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE HTML>
<html>
<head>
<title>7</title>
<style>
._7a {
width: 200px;
border-radius: 30px;
}
._7b {
width: 160px;
height: 160px;
object-fit: cover;
object-position: center;
}
._7c {
width: 160px;
height: 160px;
object-fit: cover;
object-position: center;
border-radius: 80px;
}
</style>
</head>
<body>
<img class="_7a" src="picture.jpg">
<img class="_7b" src="picture.jpg">
<img class="_7c" src="picture.jpg">
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE HTML>
<html>
<head>
<title>7</title>
<style>
._7d {
margin:10px;
border-width: 1px;
border-color: #AAA;
padding: 8px 5px;
border-radius: 4px;
}
._7e {
margin: 10px;
width: 60%;
padding: 8px 5px;
border-radius: 13px;
border: none;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<input class="_7d" type="text" placeholder="Search"><br/>
<input class="_7e" type="text" placeholder="Search Google or type a URL">
</body>
</html>
|
**Challenge Exercise **
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE HTML>
<html>
<head>
<title>7</title>
<style>
.text {
color: #333;
font-size: 12px;
margin: 2px;
}
.input_box {
padding: 5px;
width: 320px;
margin: 2px;
border-radius: 3px;
border-color: #666;
}
.join_button {
margin-top: 10px;
padding: 10px 125px;
color: #FFF;
border: none;
border-radius: 20px;
background-color: rgb(48, 109, 199);
}
</style>
</head>
<body>
<p class="text">Email</p>
<input class="input_box" type="text">
<p class="text">By clicking Agree & join, you agree to the Privacy Policy.</p>
<button class="join_button">Agree & Join</button>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <!DOCTYPE HTML>
<html>
<head>
<title>7</title>
<style>
.profile {
vertical-align: middle;
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 25px;
margin-right: 10px;
}
.text {
vertical-align: middle;
color: #888;
margin-right: 100px;
}
.tweet {
vertical-align: middle;
background-color: rgb(12, 117, 203);
padding: 10px 15px;
font-weight: bold;
border-radius: 20px;
color:#FFF;
border:none;
}
</style>
</head>
<body>
<img class="profile" src="picture.jpg">
<span class="text">What's happening?</span>
<button class="tweet">Tweet</button>
</body>
</html>
|
8. CSS Display Property
- display property
- block element = takes up the entire line
9. The div Element
10. Nested Layouts Technique
11. CSS Grid
12. Flexbox
13. Nested Flexbox
14. CSS Position
15. Position Absolute and Relative
16. Finish the Project
17. More CSS Features
Outro
